﻿<DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }'>
    <Overlay>
        @_overlayMenu
    </Overlay>
    <ChildContent>
        Dropdown
    </ChildContent>
</DropdownButton>
<DropdownButton Icon="user">
    <Overlay>
        @_overlayMenu
    </Overlay>
    <ChildContent>
        Dropdown
    </ChildContent>
</DropdownButton>
<DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Disabled="@true">
    <Overlay>
        @_overlayMenu
    </Overlay>
    <ChildContent>
        Dropdown
    </ChildContent>
</DropdownButton>
<DropdownButton ButtonsRender="ButtonsRender">
    <Overlay>
        @_overlayMenu
    </Overlay>
    <ChildContent>
        TODO: With ToolTip
    </ChildContent>
</DropdownButton>
<Dropdown>
    <Overlay>
        @_overlayMenu
    </Overlay>
    <ChildContent>
        <Button>Button <Icon Type="down" /></Button>
    </ChildContent>
</Dropdown>

@code
{
    private RenderFragment _overlayMenu =@<Menu>
        <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                1st menu item
            </a>
        </MenuItem>
        <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                2nd menu item
            </a>
        </MenuItem>
        <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                3rd menu item
            </a>
        </MenuItem>
    </Menu>;

    
    private RenderFragment ButtonsRender(RenderFragment leftButton, RenderFragment rightButton)
    {
        return @<Template>
            <span>@leftButton</span>@rightButton
        </Template>;
    }
}